<template>
  <div>
    <a-form id="components-form-demo-normal-login" :form="form" @submit="handleSubmit">
      <a-form-item class="input-item">
        <a-input v-decorator="['userName',{ rules: [{ required: true, message: 'Please input your username!' }] },]"
                 placeholder="Username">
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item class="input-item">
        <a-input v-decorator="['password',{ rules: [{ required: true, message: 'Please input your Password!' }] },]"
                 type="password" placeholder="Password">
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>

      <a-form-item>
        <div>
          <a-button type="primary" html-type="submit" class="login-form-button">
            登录
          </a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import TencentCaptcha from 'TencentCaptcha'
export default {
  data () {
    return {
    }
  },
  beforeCreate () {
    if (window.TencentCaptcha === undefined) {
      const script = document.createElement('script')
      const head = document.getElementsByTagName('head')[0]
      script.type = 'text/javascript'
      script.charset = 'UTF-8'
      script.src = 'https://ssl.captcha.qq.com/TCaptcha.js'
      head.appendChild(script)
    }
    this.form = this.$form.createForm(this, {
      name: 'login_form'
    })
  },
  methods: {
    handleSubmit (e) {
      // 取消事件的默认动作
      // 例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          const that = this
          var captcha1 = new TencentCaptcha('2077706264', function (res) {
            /* callback */
            console.log(res)
            if (res.ret === 0) {
              that.$http.post('/loginAuthen', { ticket: res.ticket, randstr: res.randstr }, { emulateJSON: true })
                .then(resp => {
                  if (resp.body.response === '1') {
                    that.login(values)
                  } else {
                    that.$message.error(resp.body.err_msg)
                  }
                }, (error) => {
                  console.log(error)
                  that.$message.error('验证码错误')
                })
            } else {
              that.$message.error('验证码错误')
            }
          })
          captcha1.show()// 显示验证码
        }
      })
    },
    login (values) {
      this.$http.post('/admin/login', { name: values.userName, password: values.password }, { emulateJSON: true })
        .then((resp) => {
          console.log(resp)
          if (resp.body.status === 200) {
            localStorage.userInfo = JSON.stringify(resp.body.data)
            if (resp.body.data.adminRole === 0) {
              this.$router.push('/superHome/admins')
            } else {
              this.$router.push('/home/users')
            }
          } else {
            this.$message.error(resp.data.msg)
          }
        }, (error) => {
          console.log(error)
          this.$message.error('请保持网络畅通')
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
#components-form-demo-normal-login
  .input-item
    width: 80%
    margin 20px auto
  .login-form-button
    width: 60%
    margin-top 15px
</style>
